<template>
	<view>
		<!-- 主体 -->
		<view class="page prize-list">
			<!-- 筛选 -->
			<view class="filter-box flex-row-between">
				<view class="input-box">
					<input type="text" v-model="searchVal" @input="OnsearchVal" placeholder="奖品名称" />
				</view>
				<!-- 日期选择 -->
				<view class="date flex-row-start">
					<view class="font12">领取日期：</view>
					<biaofun-datetime-picker
						class="font12 font-999999"
						placeholder="选择领取的日期"
						:start="calendar.start"
						:end="calendar.end"
						fields="day"
						@change="onCalendar"
					>
					</biaofun-datetime-picker>
					<uni-icons type="arrowright" size="12" color="#bababa"></uni-icons>
				</view>
				<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/icon-serach1.png" @click="Onsearch"></image>
			</view>
			<view class="hr10"></view>
			<!-- 列表 -->
			<LoadMore ref="LoadMore" id="LoadMore" :token="true" :diffHeight="120" :initData="initData" @dataRefresh='dataRefresh'>
				<view class="list-box">
					<block v-for="(item, index) in dataList" :key="index">
						<view class="item flex-row-between">
							<view class="image flex-column-center">
								<image mode="widthFix" :src="imgPath + item.image"></image>
							</view>
							<view class="info flex-column-between">
								<view class="font14">{{item.name}}</view>
								<view class="font12 font-666666">{{item.activity_name}}</view>
								<view class="font11 font-999999">{{item.sendtime}}</view>
							</view>
							<view class="flex-column-between" style="align-items: flex-end;">
								<view v-if="item.status == 'normal' && item.end == 1" class="btn btn1" @tap="clickPrize(item)">领取</view>
								<view v-if="item.status == 'exchange'" class="btn btn2" @tap="lookPrize(item)">查看</view>
								<view v-if="item.status == 'normal' && item.end == 0" class="btn btn3">领取</view>
								<view v-if="item.status == 'normal' && item.end == 0" class="font10 font-ff3c37">已超过可领取时间</view>
							</view>
						</view>
					</block>
				</view>
			</LoadMore>
		</view>
		<!-- 弹窗-实物领取 -->
		<uni-popup ref="prize1" type="center">
			<view class="popup-prize">
				<view class="title font15 tc font-b">物流信息</view>
				<view class="form-prize">
					<view class="item">
						<view class="label">收件人：</view>
						<view class="f-input">
							<input type="text" v-model="form1.name" @input="Onname" placeholder="收件人姓名" placeholder-style="font-size: 24rpx;" />
						</view>
					</view>
					<view class="item">
						<view class="label">联系电话：</view>
						<view class="f-input">
							<input type="text" v-model="form1.mobile" @input="Onmobile" placeholder="收件人联系电话" placeholder-style="font-size: 24rpx;" />
						</view>
					</view>
					<view class="item">
						<view class="label">收货地址：</view>
						<view class="f-textarea">
							<textarea v-model="form1.address" @input="Onaddress" placeholder="收货地址" placeholder-style="font-size: 24rpx;"></textarea>
						</view>
					</view>
					<view class="item">
						<image class="check" src="https://static.newbeaconhotels.com/app/hotel/icon-check.png"></image>
						<view class="flex-1 font12 font-999999">填写信息后不可修改，请确认收货信息填写无误</view>
					</view>
				</view>
				<view class="btn-long" @click="goodsConfirm">确定</view>
			</view>
		</uni-popup>
		<!-- 弹窗-实物查看 -->
		<uni-popup ref="prize2" type="center">
			<view class="popup-prize">
				<view class="title font15 tc font-b">物流信息</view>
				<view class="form-prize form-look">
					<view class="item">
						<view class="label">收件人：</view>
						<view class="text">{{form1.name}}</view>
					</view>
					<view class="item">
						<view class="label">联系电话：</view>
						<view class="text">{{form1.mobile}}</view>
					</view>
					<view class="item">
						<view class="label">收货地址：</view>
						<view class="text">{{form1.address}}</view>
					</view>
					<view class="item">
						<view class="label">物流单号：</view>
						<view class="text">{{form1.code ? form1.code : '暂未发货'}}</view>
					</view>
				</view>
				<view class="btn-long grey" @click="onCopy(form1.code)">复制单号</view>
			</view>
		</uni-popup>
		<!-- 弹窗-会员领取 -->
		<uni-popup ref="prize3" type="center">
			<view class="popup-prize">
				<view class="title font15 tc font-b">欢迎领取</view>
				<view class="form-prize">
					<view class="item font14">请输入需要充值的账号</view>
					<view class="item">
						<view class="label">手机号码：</view>
						<input type="text" v-model="form2.mobile" @input="Onmobile1" placeholder="手机号码" placeholder-class="pclass" />
					</view>
					<view class="item">
						<image class="check" src="https://static.newbeaconhotels.com/app/hotel/icon-check.png"></image>
						<view class="flex-1 font12 font-999999">填写信息后不可修改，请确认账号信息（手机号）填写无误</view>
					</view>
				</view>
				<view class="btn-long" @click="cardConfirm">确定</view>
			</view>
		</uni-popup>
		<!-- 弹窗-会员查看 -->
		<uni-popup ref="prize4" type="center">
			<view class="popup-prize">
				<view class="title font15 tc font-b">查看奖品</view>
				<view class="content">您的奖品【{{currentPrize.name}}】将在24小时内到账：{{form2.mobile}}</view>
				<view class="btn-long" @click="onClose">我知道了</view>
			</view>
		</uni-popup>
		<!-- 弹窗-非实物查看 -->
		<uni-popup ref="prize5" type="center">
			<view class="popup-prize">
				<view class="title font15 tc font-b">欢迎领取</view>
				<view v-if="currentPrize.type == 'cash'" class="content">您的{{currentPrize.name}}已到账，请到微信钱包中查看！</view>
				<view v-else class="content">领取成功，请到“个人中心‘’查看</view>
				<view class="btn-long" @click="onClose">我知道了</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import biaofunDatetimePicker from '@/components/biaofun-datetime-picker/index.vue';
	import LoadMore from "@/components/j-loadMore/index.vue";
	export default {
		components: { biaofunDatetimePicker, LoadMore },
		data() {
			return {
				themeColor: '#03004c',
				imgPath: this.$Config.http_static, // 图片头
				currentType: 'goods', // goods-实物，card-会员，coupon-卡券，cash-现金红包，coin-纽扣币，score-积分
				calendar: {
					start: '2021-06-01',
					end: this.$base.formatTime(new Date(), "yyyy-MM-dd")
				},
				searchVal: '',
				// 传参数据
				initData: {
					url: 'myPrize',
					param: {
						name:'',
						date: ''
					}
				},
				dataList: [],
				// 实物领取信息
				form1: {
					name: '',
					mobile: '',
					address: '',
					code: ''
				},
				// 会员领取信息
				form2: {
					mobile: ''
				},
				currentPrize: {}, // 当前点击领取的奖品
				group: this.group == 'wxapp' ? 'WxApp' : 'H5'
			}
		},
		onLoad(options) {
		},
		methods: {
			// 物流input
			Onname(e) {
				this.form1.name = e.detail.value
			},
			Onmobile(e) {
				this.form1.mobile = e.detail.value
			},
			Onaddress(e){
				this.form1.address = e.detail.value
			},
			// 会员input
			Onmobile1(e) {
				this.form2.mobile = e.detail.value
			},
			// 关键字筛选
			OnsearchVal(e) {
				this.searchVal = e.detail.value
				this.initData.param.name = e.detail.value
			},
			// 选日期
			onCalendar (date) {
				this.initData.param.date = date.f1
			},
			// 搜索
			Onsearch () {
				this.$refs.LoadMore.oncutRefresh(this.initData)
			},
			// LoadMore返回列表数据
			dataRefresh(e){
				this.dataList = e
			},
			// 点击领取按钮
			clickPrize (item) {
				let $this = this
				$this.currentPrize = item
				switch (item.type) {
					case 'goods':
						$this.$refs.prize1.open()
						break
					case 'card':
						$this.$refs.prize3.open()
						break
					default:
						$this.$Http({
							url: 'cashPrize',
							type: 'POST',
							token: true,
							load: true,
							data: {
								id: item.id,
								type: $this.group
							},
						}).then(res => {
							if (res.code === 1) {
								$this.$refs.prize5.open()
								$this.$refs.LoadMore.oncutRefresh($this.initData)
							} else {
								uni.showToast({ title: res.msg, icon: 'none' })
							}
						});
						break
				}
			},
			// 确认领取-实物
			goodsConfirm () {
				let $this = this
				if (this.form1.name == '') {
					uni.showToast({  title: '请输入姓名', icon: 'none' });
					return
				}
				if (!this.$base.checkMobile(this.form1.mobile)) {
					uni.showToast({ title: '请输入正确的手机号码', icon: 'none' })
					return
				}
				if (this.form1.address == '') {
					uni.showToast({  title: '请输入收货地址', icon: 'none' });
					return
				}
				this.$Http({
					url: 'cashPrize',
					type: 'POST',
					token: true,
					load: true,
					data: {
						id: $this.currentPrize.id,
						info: JSON.stringify(this.form1),
						type: $this.group
					},
				}).then(res => {
					if (res.code === 1) {
						$this.$refs.prize1.close()
						uni.showToast({ title: '领取成功' })
						this.$refs.LoadMore.oncutRefresh(this.initData)
					} else {
						uni.showToast({ title: res.msg, icon: 'none' })
					}
				});
			},
			// 确认领取-会员
			cardConfirm () {
				let $this = this
				if (!this.$base.checkMobile(this.form2.mobile)) {
					uni.showToast({ title: '请输入正确的手机号码', icon: 'none' })
					return
				}
				this.$Http({
					url: 'cashPrize',
					token: true,
					load: true,
					data: {
						id:  $this.currentPrize.id,
						info: JSON.stringify(this.form2),
						type: $this.group
					},
				}).then(res => {
					if (res.code === 1) {
						$this.$refs.prize3.close()
						$this.$refs.LoadMore.oncutRefresh($this.initData)
					} else {
						uni.showToast({ title: res.msg, icon: 'none' })
					}
				});
			},
			// 点击查看
			lookPrize (item) {
				let $this = this
				this.$Http({
					url: 'cashPrize',
					token: true,
					load: true,
					data: {
						id:  item.id,
						type: $this.group
					},
				}).then(res => {
					if (res.code == 1) {
						switch (item.type) {
							case 'goods':
								$this.form1 = JSON.parse(res.data)
								$this.$refs.prize2.open()
								break
							case 'card':
								$this.$refs.prize4.open()
								break
							default:
								$this.$refs.prize5.open()
								break
						}
					} else {
						uni.showToast({ title: res.msg, icon: 'none' })
					}
				});
			},
			// 复制到粘贴板
			onCopy (str) {
				this.$refs.prize2.close()
				
				if (str == '') {
					uni.showToast({ title:'暂无单号信息', icon: 'none' })
					return false
				}
				// #ifdef H5
				let result = this.$base.h5Copy(str)
				if (result == false) {
					uni.showToast({ title:'不支持', icon: 'none' })
				} else {
					uni.showToast({ title: '复制成功' })
				}
				// #endif

				// #ifndef H5
				uni.setClipboardData({
					data: content,
					success: () => {
						uni.showToast({ title: '复制成功' })
					}
				})
				// #endif
			},
			// 关闭弹窗
			onClose () {
				this.$refs.prize4.close()
				this.$refs.prize5.close()
			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
